<template>
    <div>
        <h1>显示</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>家庭地址</td>
                    <td>图片</td>
                    <td>生日</td>
                </tr>
                <tr>
                    <td>{{show.name}}</td>
                    <td>{{show.age}}</td>
                    <td>{{ show.gender?"男":"女"}}</td>
                    <td>{{show.hometown}}</td>
                    <td><img :src="show.photo" width="100px"/></td>
                    <td>{{moment(show.birthday).format("YYYY-MM-DD")}}</td>
                </tr>
                <tr>
                    <td>{{show1.name}}</td>
                    <td>{{show1.age}}</td>
                    <td>{{show1.gender?"男":"女"}}</td>
                    <td>{{show1.hometown}}</td>
                    <td><img :src="show1.photo" width="100px"/></td>
                    <td>{{moment(show.birthday).format("YYYY-MM-DD")}}</td>
                </tr>
                <tr>
                    <td>{{show2.name}}</td>
                    <td>{{show2.age}}</td>
                    <td>{{show2.gender?"男":"女"}}</td>
                    <td>{{show2.hometown}}</td>
                    <td><img :src="show2.photo" width="100px"/></td>
                    <td>{{moment(show.birthday).format("YYYY-MM-DD")}}</td>
                </tr>
                <tr>
                    <td>{{show3.name}}</td>
                    <td>{{show3.age}}</td>
                    <td>{{show3.gender?"男":"女"}}</td>
                    <td>{{show3.hometown}}</td>
                    <td><img :src="show3.photo" width="100px"/></td>
                    <td>{{moment(show.birthday).format("YYYY-MM-DD")}}</td>
                </tr>
            </tbody>
        </table>
        <h1>添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" v-model="add.name">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" v-model="add.pwd">
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td>
                        <input type="password" v-model="add.pwds">
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="1" v-model="add.sex">男
                        <input type="radio" name="sex" value="0" v-model="add.sex">女
                    </td>
                </tr>
                
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" name="ai" value="打篮球" v-model="add.ai">打篮球
                        <input type="checkbox" name="ai" value="跑步" v-model="add.ai">跑步
                        <input type="checkbox" name="ai" value="阅读" v-model="add.ai">阅读
                        <input type="checkbox" name="ai" value="上网" v-model="add.ai">上网
                    </td>
                </tr>
                <tr>
                    <td>出生地</td>
                    <td>
                        <select v-model="add.chu">
                            <option value="">请选择</option>
                            <option :value="item.code" v-for="item in chu" :key="item.code">{{ item.name}}</option>
                        </select>
                    </td>
                </tr>
               <tr>
                <td></td>
                <td>
                    <input type="button" value="添加" @click="adds">
                </td>
               </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import moment, { months } from 'moment';
let show=ref(
{
name: '张三',
age: 16,
gender: 0,
hometown: '广东省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2004-09-20T11:32:09.244927'
})
let show1=ref(
{
    name: '李四',
age: 17,
gender: 1,
hometown: '河北省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2004-10-22T11:32:09.244927'
})
let show2=ref(
{
    name: '王五',
age: 18,
gender: 1,
hometown: '福建省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2005-09-25T11:32:09.244927'

})
let show3=ref(
{
    name: '马六',
age: 19,
gender: 0,
hometown: '河南省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2006-01-25T11:32:09.244927'
})
let add=ref({
    
    name:'',
    pwd:'',
    pwds:'',
    sex:'',
    ai:[],
    chu:'',
})
let chu=ref([
    { name: '北京市', code: '110000' },
{ name: '天津市', code: '120000' },
{ name: '河北省', code: '130000' },
{ name: '山西省', code: '140000' },
{ name: '内蒙古自治区', code: '150000' },
{ name: '辽宁省', code: '210000' },
{ name: '吉林省', code: '220000' },
{ name: '黑龙江省', code: '230000' },
{ name: '上海市', code: '310000' },
{ name: '江苏省', code: '320000' },
{ name: '浙江省', code: '330000' },
{ name: '安徽省', code: '340000' },
{ name: '福建省', code: '350000' },
{ name: '江西省', code: '360000' },
{ name: '山东省', code: '370000' },
{ name: '河南省', code: '410000' },
{ name: '广西壮族自治区', code: '450000' },

])
const adds=()=>{
    console.log(add);
}
</script>

<style scoped>

</style>